<template>
<!-- 发送信息 -->
  <div style="text-align: left">
    <el-button class="add-button" type="primary" @click="dialogFormVisible = true">添加信息</el-button>
    <el-dialog
      title="发送信息"
      :visible.sync="dialogFormVisible"
      @close="clear">

      <el-form :model="form" :rules="rules" style="text-align: left" ref="dataForm">

        <el-form-item label="信息类型" :label-width="formLabelWidth" prop="receiveUsername">
            <div>
              <el-radio-group v-model="form.sendType" @change="ontab">
                <el-radio-button label="1">短信</el-radio-button>
                <el-radio-button  label="0">邮箱</el-radio-button>
              </el-radio-group>
            </div>
         </el-form-item>

        <el-form-item label="接收用户" :label-width="formLabelWidth" prop="receiveUsername">
          <!-- <el-input v-model="form.receiveUsername" autocomplete="off" ></el-input> -->
          <el-autocomplete
            placeholder="请输入选择用户"
            v-model="form.receiveUsername"
            :fetch-suggestions="querySearchAsync"
            @select="handleSelect"
          >
          </el-autocomplete>

        </el-form-item>

         <el-form-item label="接收人账号" :label-width="formLabelWidth" prop="receiveNum">
          <el-input v-model="form.receiveNum" autocomplete="off"></el-input>
        </el-form-item>

        <div v-if="ontabkey">
          <el-form-item label="主题" :label-width="formLabelWidth" prop="subject">
            <el-input v-model="form.subject" autocomplete="off"></el-input>
          </el-form-item>
        </div>

        <el-form-item label="内容" :label-width="formLabelWidth" prop="content">
          <el-input  v-model="form.content" autocomplete="off"></el-input>
        </el-form-item>

        <div v-if="ontabkey">
          <el-form-item label="附件" :label-width="formLabelWidth" prop="filename">
            <el-input v-model="form.filename" autocomplete="off"></el-input>
          </el-form-item>
        </div>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" icon="el-icon-s-promotion" @click="onSubmit">发 送</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  export default {
    name: 'MessAdd',
    data () {
      return {
        querySearchUserList: '',
        timeout: null,
        ontabkey: '',
        dialogFormVisible: false,
        rules: {
          receiveNum: [{ required: true, message: '接收人账号不能为空', trigger: 'focus' }],
          content: [{ required: true, message: '内容不能为空', trigger: 'blur' }]
        },
        form: {
          id: '',
          receiveUsername: '',
          receiveNum: '',
          subject: '',
          content: '',
          filename: '',
          sendType: '1'
        },
        formLabelWidth: '120px'
      }
    },
    mounted () {
      this.querySearchUser()
    },
    methods: {
      clear () {
        this.form = {
          id: '',
          receiveUsername: '',
          receiveNum: '',
          subject: '',
          content: '',
          filename: '',
          sendType: ''
        }
      },
      onSubmit () {
        this.$axios
          .post('/admin/message/send', {
            id: this.form.id,
            receiveUsername: this.form.receiveUsername,
            receiveNum: this.form.receiveNum,
            subject: this.form.subject,
            content: this.form.content,
            filename: this.form.filename,
            sendType: this.form.sendType
          }).then(resp => {
            if (resp && resp.data.code === 200) {
              this.dialogFormVisible = false
              this.$emit('onSubmit')
               this.$message({
                  type: 'success',
                  message: '发送成功'
                })
            } else {
              // 从后端返回错误信息
              this.$alert(resp.data.message, '错误提示', {
              type: 'error',
              dangerouslyUseHTMLString: true
              })
            }
        })
      },
      ontab: function (val) {
          if (val === '0') {
            this.ontabkey = true
            this.form.receiveUsername = ''
            this.form.receiveNum = ''
          } else {
            this.ontabkey = false
            this.form.receiveUsername = ''
            this.form.receiveNum = ''
            this.form.subject = ''
            this.form.filename = ''
          }
      },
      // queryString 为在框中输入的值
      // cb 回调函数，将处理好的数据推回
      querySearchAsync (queryString, cb) {
          var studentBasic = JSON.parse(JSON.stringify(this.querySearchUserList).replace(/name/g, 'value'))
          var results = queryString ? studentBasic.filter(this.createStateFilter(queryString)) : studentBasic
          clearTimeout(this.timeout)
          this.timeout = setTimeout(() => {
            cb(results)
          }, 0.5 * 1000)
      },
      // 根据输入的字段进行筛选
      createStateFilter (queryString) {
          return (state) => {
          return (state.value.toString().toLowerCase().indexOf(queryString.toLowerCase()) === 0)
          }
      },
      querySearchUser () {
          this.$axios.get('/admin/user').then(resp => {
            if (resp && resp.data.code === 200) {
                this.querySearchUserList = resp.data.result
              }
            })
      },
      // 将其他数据自动补全，采用覆盖的方法
      handleSelect (item) {
        if (this.ontabkey) { // 邮箱
          this.form.receiveNum = item.email
        } else {
          this.form.receiveNum = item.phone
        }
      }

    }
  }
</script>

<style scoped>
  .add-button {
     margin: 0px 0 5px 15px;
  }
</style>
